<template>
  <div class="wy-main corp-my wei_corp_my">
    <a-row class="wy-main-title">
      <a-col :span="24">
        <p class="title-p">
          <a-divider class="title-vertical" type="vertical" />
          <span class="title-span">我的主页</span>
          <router-link to="/corp/my/business">
            <a class="title-button">工商信息</a>
          </router-link>
          <router-link to="/corp/my/standard">
            <a class="title-button">企业主业内容规范</a>
          </router-link>
          <a-divider class="title-divider" />
        </p>
      </a-col>
    </a-row>
    <div class="home_progress">
          <a-row class="home_perfect">
          <a-col :span="24">
            <b class="home_perfect_title">企业信息完善度</b>
          </a-col>
      </a-row>
       <div class="percent" :style="'left:'+27+'%'">
        30%
        <div class="horn"></div>
      </div>
<!--       <a-row style="margin-top: 30px;">
          <a-col :span="24">
            <a-progress type="line" :percent="30" :showInfo="false" />
          </a-col>
      </a-row> -->
       <a-row style="margin-top: 30px;">
      <a-progress :percent="30" />
      <p style="margin-top: 15px;">完善企业主页信息，提升企业公信力，获取更多商机。</p>
    </a-row>
    </div>
   
    <a-row class="tips">
      <a-col :span="12">
        <p><b>基本信息</b></p>
      </a-col>
    </a-row>
    <div style="padding: 20px;">
      <a-row>
        <a-col :span="3">
          <p class="wei_span_x"><span>*</span>企业名称：</p>
        </a-col>
        <a-col :span="12" :push='1'>
          <p>北京荣之联科技股份有限公司</p>
        </a-col>

      </a-row>
      <a-row>
        <a-col :span="3">
          <p class="wei_span_x"><span>*</span>企业logo：</p>
        </a-col>
        <a-col :span="12" :push='1'>
          <p>
            <a-avatar shape="square" :size="64" icon="user" />
            <a-upload name="file" :multiple="true" action="//jsonplaceholder.typicode.com/posts/" :headers="headers" @change="handleChange">
              <a-button style="margin-left:40px;margin-right:40px;">
                <a-icon type="upload" /> 上传
              </a-button>
              <span>建议上传图片尺寸为60*60，大小不超过1M</span>
            </a-upload>
          </p>

        </a-col>
      </a-row>


    <a-row>
      <a-col :span="3">
          <p class="wei_span_x"><span>*</span>banner配图：</p>
        </a-col>
      <a-col :span="16" :push='1'>
        
        <div class="clearfix">
          <a-upload action="//jsonplaceholder.typicode.com/posts/" listType="picture-card" :fileList="fileList" @preview="handlePreview" @change="handleChange">
            <div v-if="fileList.length < 4">
              <a-icon type="plus" />
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
        <div>至少上传一张背景图；建议上传图片尺寸为1920*720，大小不超过10M</div>
      </a-col>
    </a-row>
<!--       <a-row>
        <a-col :span="4">
          <p>头部配图：</p>
        </a-col>
        <a-col :span="12">
          <p>
            <a-avatar shape="square" :size="64" icon="user" />
          </p>
          <a-upload name="file" :multiple="true" action="//jsonplaceholder.typicode.com/posts/" :headers="headers" @change="handleChange">
            <a-button>
              <a-icon type="upload" /> 上传
            </a-button>
            <span>建议上传图片尺寸为750*240，大小不超过1M</span>
          </a-upload>
        </a-col>
      </a-row> -->

    </div>
    <a-row class="tips">
      <a-col :span="16">
        <p><b>主营业务</b><span style="margin-left:20px;">发布企业能为客户提供的产品及服务，客户可以直接找到该产品/服务的联系人</span></p>
      </a-col>
    </a-row>
    <div style="padding: 20px;">
    <a-form layout="inline">
    <a-row v-for="(item,index) in mainBusinessList" :key="index">
        <a-col :span="3" style="margin-top:46px;">
          <p class="wei_span_x"><span>*</span>主营业务{{item.order}}：</p>
        </a-col>
        <a-col :span="20" :push='1'>
          <div class="ant-col-4">
            <a-upload
              name="avatar"
              listType="picture-card"
              class="avatar-uploader"
              :showUploadList="false"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              :beforeUpload="beforeUpload"
              @change="handleChangeBusi"
            >
              <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
              <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
          </div>
         <a-form-item  label="业务描述" style="margin-top:36px;">
          <a-input style="width:600px;"   placeholder='请输入业务名称'  />
        </a-form-item>
        
        </a-col>

       
  </a-row>
   <a-col :span='6' :push="4"><div class="wei_add"><span @click="addmore()">+</span><span>增加更多主营业务</span></div></a-col>
   <a-col :span='6' :push="14"><div class="wei_reduce"><span @click="reducemore()">-</span><span>(删除业务按钮)</span></div></a-col>
    
  </a-form>
  </div>
  <a-row class="tips wei_clear">
  <a-col :span="16">
    <p><b>公司荣誉</b><span style="margin-left:20px;">添加企业获得的荣誉证书、奖杯、资质证明等，让客户充分了解企业的实力，提高企业可信度。</span></p>
  </a-col>
</a-row>

    <div style="padding: 20px;">
    <a-form layout="inline">
    <a-row v-for="(item,index) in honorList" :key="index">
        <a-col :span="3" style="margin-top:46px;">
          <p class="wei_span_x"><span>*</span>荣誉{{item.order}}：</p>
        </a-col>
        <a-col :span="20" :push='1'>
          <div class="ant-col-4">
            <a-upload
              name="avatar"
              listType="picture-card"
              class="avatar-uploader"
              :showUploadList="false"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              :beforeUpload="beforeUpload"
              @change="handleChangeBusi"
            >
              <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
              <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
          </div>
         <a-form-item  label="获奖名称" style="margin-top:36px;">
          <a-input   placeholder='请输入获奖名称'  />
        </a-form-item>
         <a-form-item  label="获奖时间" style="margin-top:36px;">
         <a-date-picker @change="onChange" />
        </a-form-item>
        </a-col>

       
  </a-row>
   <a-col :span='6' :push="4"><div class="wei_add"><span @click="addmorehonor()">+</span><span>增加更多公司荣誉</span></div></a-col>
   <a-col :span='6' :push="14"><div class="wei_reduce"><span @click="reducemorehonor()">-</span><span>(删除业务按钮)</span></div></a-col>
    
  </a-form>
  </div>

  <a-row class="tips wei_clear">
  <a-col :span="16">
    <p><b>公司简介</b></p>
  </a-col>
</a-row>
<div style="padding:20px;">
    
    <a-row>
      <a-col :span="3">
          <p class="wei_span_x"><span>*</span>图片：</p>
        </a-col>
      <a-col :span="16" :push='1'>
        
        <div class="clearfix">
            <a-upload
              name="avatar"
              listType="picture-card"
              class="avatar-uploader"
              :showUploadList="false"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              :beforeUpload="beforeUpload"
              @change="handleChangeBusi"
            >
              <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
              <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
        </div>
        <div>
            <p>图片尺寸：548*313px</p>
            <p>图片格式：jpg、jpeg、png</p>
            <p>图片大小：不超过5M</p>
        </div>
      </a-col>
    </a-row>
        <a-row>
      <a-col :span="3">
          <p class="wei_span_x"><span>*</span>公司简介：</p>
        </a-col>
        <a-col :span="12" :push='1'>
          <a-textarea placeholder="" :autosize="{ minRows: 4, maxRows: 6 }" />
        </a-col>
      </a-row>
</div>
  <a-row class="tips wei_clear">
  <a-col :span="16">
    <p><b>联系方式</b></p>
  </a-col>
</a-row>
<div style="padding:20px;">
      <a-row type="flex" justify="space-around" align="middle" style="margin-bottom:20px;">
        <a-col>
          公司地址：
        </a-col>
        <a-col :span="6">
          <a-input placeholder="请输入公司地址" />
        </a-col>
        <a-col>
          邮编：
        </a-col>
        <a-col :span="6">
          <a-input placeholder="请输入邮编" />
        </a-col>
      </a-row>
      <a-row type="flex" justify="space-around" align="middle" style="margin-bottom:20px;">
        <a-col>
          公司座机：
        </a-col>
        <a-col :span="6">
          <a-input placeholder="请输入公司座机号码" />
        </a-col>
        <a-col>
          邮箱：
        </a-col>
        <a-col :span="6">
          <a-input placeholder="请输入邮箱" />
        </a-col>
      </a-row>
      <a-row type="flex" justify="space-around" align="middle" style="margin-bottom:20px;">
        <a-col>
          公司传真：
        </a-col>
        <a-col :span="6">
          <a-input placeholder="请输入公司传真" />
        </a-col>
        <a-col>
          手机：
        </a-col>
        <a-col :span="6">
          <a-input placeholder="请输入手机号码" />
        </a-col>
      </a-row>

          <a-row>
      <a-col :span="3">
          <p class="wei_span_x"><span>*</span>企业二维码：</p>
        </a-col>
      <a-col :span="16" :push='1'>
        
        <div class="clearfix">
            <a-upload
              name="avatar"
              listType="picture-card"
              class="avatar-uploader"
              :showUploadList="false"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              :beforeUpload="beforeUpload"
              @change="handleChangeBusi"
            >
              <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
              <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
        </div>
        <div>
            <p>图片尺寸：548*313px</p>
            <p>图片格式：jpg、jpeg、png</p>
            <p>图片大小：不超过5M</p>
        </div>
      </a-col>
    </a-row>

        <a-row>
      <a-col :span="3">
          <p class="wei_span_x"><span>*</span>客服二维码：</p>
        </a-col>
      <a-col :span="16" :push='1'>
        
        <div class="clearfix">
            <a-upload
              name="avatar"
              listType="picture-card"
              class="avatar-uploader"
              :showUploadList="false"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              :beforeUpload="beforeUpload"
              @change="handleChangeBusi"
            >
              <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
              <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
        </div>
        <div>
            <p>图片尺寸：548*313px</p>
            <p>图片格式：jpg、jpeg、png</p>
            <p>图片大小：不超过5M</p>
        </div>
      </a-col>
    </a-row>
    <a-row>
        <a-col :span="4">
          <a-checkbox @change="onCheck">企业主页二维码生成</a-checkbox>
        </a-col>
      <a-radio-group @change="onChangeGroup" v-model="value">
        <a-radio :value="1">10元每月</a-radio>
        <a-radio :value="2">25元/季</a-radio>
        <a-radio :value="3">88元/年</a-radio>
      </a-radio-group>
    </a-row>
</div>
  <div class="wei_row">
    <a-button class="title-button" type="primary"  >生成主页预览</a-button>
    <a-button class="title-button" type="primary"  >保存</a-button>
    <a-button class="title-button" type="primary"  >修改</a-button>
  </div>
        <div  class="route_choice">
        <a-row >
          <a-form-item label="" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" >
            <a-checkbox v-decorator="['clause',{rules: [{ required: true, message: '请阅读并接受！' }]},{ valuePropName: 'checked' }]">我已阅读并接受<a href="javascript:;" @click="userShow=true">《企业主页内容规范》</a></a-checkbox>
          </a-form-item>
        </a-row>

        <a-row>
          <a-button type="primary"  html-type="submit">提交</a-button>
          
        </a-row>
      </div>
  </div>
</template>
<script>
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
  export default {
    data() {
      return {
        mainBusinessList:[{
          order:'一',

        },{
          order:'二',

        },{
          order:'三',

        }],
        honorList:[
        {
          order:'一',

        },{
          order:'二',

        },{
          order:'三',

        }
        ],
        value:1,
        loading: false,
        beginPlace:'',
        imageUrl: '',
        headers: {
          authorization: 'authorization-text',
        },
        previewVisible: false,
        previewImage: '',
        fileList: [{
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        }],
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
    },
    created(){
      console.log('xxx'.padStart(6, 'ab') )
    },
    methods: {
      //新增主营业务
      addmore(){
       if(this.mainBusinessList.length>6){
        this.$message.error('此模块最多6项');
        return;
       }else {
          this.mainBusinessList.push({
          order:'四',
        })
       }
      },
      //删除主营业务
      reducemore(){
         if(this.mainBusinessList.length<=1){
          this.$message.error('此模块最少1项');
           return;
         }else{
          this.mainBusinessList.splice(this.mainBusinessList.length-1,1)
         }
      },

            //新增主营业务
      addmorehonor(){
       if(this.honorList.length>6){
        this.$message.error('此模块最多6项');
        return;
       }else {
          this.honorList.push({
          order:'四',
        })
       }
      },
      //删除主营业务
      reducemorehonor(){
         if(this.honorList.length<=1){
          this.$message.error('此模块最少1项');
           return;
         }else{
          this.honorList.splice(this.honorList.length-1,1)
         }
      },

      //选择时间
      onChange(date, dateString){
         console.log(date, dateString);
      },
      //勾选企业二维码生成
      onCheck(e){
        console.log(`checked = ${e.target.checked}`)
      },
      onChangeGroup(e){
        console.log(e)
      },
      handleCancel() {
        this.previewVisible = false
      },
      handlePreview(file) {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
      //        handleChange ({ fileList }) {
      //          this.fileList = fileList
      //        },
      // 上传图片
      handleChange(info) {
        if(info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if(info.file.status === 'done') {
          this.$message.success(`${info.file.name} file uploaded successfully`);
        } else if(info.file.status === 'error') {
          this.$message.error(`${info.file.name} file upload failed.`);
        }
      },
      // 认证提交
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {
          if(!err) {
            console.log('Received values of form: ', values);
          }
        });
      },
      // 检测确认密码
      handleConfirmBlur(e) {
        const value = e.target.value;
        this.confirmDirty = this.confirmDirty || !!value;
      },
      // 检测确认密码
      compareToFirstPassword(rule, value, callback) {
        const form = this.form;
        if(value && value !== form.getFieldValue('password')) {
          callback('您输入的两个密码不一致!');
        } else {
          callback();
        }
      },
      // 检测密码   
      validateToNextPassword(rule, value, callback) {
        const form = this.form;
        if(value && this.confirmDirty) {
          form.validateFields(['confirm'], {
            force: true
          });
        }
        callback();
      },

       handleChangeBusi (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJPG && isLt2M
    },
    }
  }
</script>

<style lang="less" scoped>


</style>